<script setup>
import {ReplyStatusEnum} from "@ginstone/nga-api/dist/src/enums/ReplyStatus";
import {toRefs} from "vue";

const props = defineProps({
  data: {type: Object},
})

const {data} = toRefs(props)

const tags = [
  ReplyStatusEnum.HIDDEN,
  ReplyStatusEnum.NO_HINT,
  ReplyStatusEnum.FREE_EDIT,
  ReplyStatusEnum.SELF_REPLY,
  ReplyStatusEnum.VERIFYING,
  ReplyStatusEnum.LOCKED,
  ReplyStatusEnum.HIDE_TITLE,
  ReplyStatusEnum.NOT_VERIFIED,
  ReplyStatusEnum.IS_SET,
  // ReplyStatusEnum.IS_SET_THREAD,
  ReplyStatusEnum.UNION_HIDDEN,
]

const danger = [ReplyStatusEnum.LOCKED, ReplyStatusEnum.NOT_VERIFIED, ReplyStatusEnum.HIDDEN, ReplyStatusEnum.HIDE_TITLE,]
const warning = [ReplyStatusEnum.VERIFYING]
const getType = (status) => {
  if (danger.includes(status.position)) {
    return 'danger'
  }
  if (warning.includes(status.position)) {
    return 'warning'
  }
  return ''
}

const getList = (data) => {
  return data.status.filter(i => tags.includes(i.position))
}

const getEffect = (status) => {
  return 'light'
}
</script>

<template>
  <span>
      <span v-for="status in getList(data)">
       <el-tooltip :content="status.description">
           <el-tag :effect="getEffect(status)" :type="getType(status)">{{ status.name }}</el-tag>
       </el-tooltip>
      </span>
  </span>
</template>

<style scoped>
</style>